<template>
  <div class="close_order components_init">
    <el-card class="box-card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="提货" name="first" :disabled="status!=='PENDING'">
          <div class="close_order_tab">
            <div class="close_order_tab_picture">
              <div>
                <upload
                  :image-url="ImgList[0]"
                  usage-name="ImgList0"
                  @handleSucces="handleSucces"
                  @handleError="handleError"
                />
                <p class="picture_content">装货签收单（必填）</p>
              </div>
              <div>
                <upload
                  :image-url="ImgList[1]"
                  usage-name="ImgList1"
                  @handleSucces="handleSucces"
                  @handleError="handleError"
                />
                <p class="picture_content">封车照片（选填）</p>
              </div>
              <div>
                <upload
                  :image-url="ImgList[2]"
                  usage-name="ImgList2"
                  @handleSucces="handleSucces"
                  @handleError="handleError"
                />
                <p class="picture_content">其他（选填）</p>
              </div>
              <div>
                <upload
                  :image-url="ImgList[3]"
                  usage-name="ImgList3"
                  @handleSucces="handleSucces"
                  @handleError="handleError"
                />
                <p class="picture_content">其他（选填）</p>
              </div>
            </div>
            <div class="close_order_tab_from">
              <div>
                <i>*</i>装货重量<el-input v-model="weight" size="mini" placeholder="请输入内容" />吨
              </div>
              <div>
                数量<el-input v-model="amount" size="mini" placeholder="请输入内容" />
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="送达" name="second" :disabled="getSecond">
          <div class="close_order_tab">
            <div class="close_order_tab_picture">
              <div>
                <upload
                  :image-url="ImgList[0]"
                  usage-name="ImgList0"
                  @handleSucces="handleSucces"
                  @handleError="handleError"
                />
                <p class="picture_content">卸货签收单（必填）</p>
              </div>
              <div>
                <upload
                  :image-url="ImgList[1]"
                  usage-name="ImgList1"
                  @handleSucces="handleSucces"
                  @handleError="handleError"
                />
                <p class="picture_content">其他（选填）</p>
              </div>
              <div>
                <upload
                  :image-url="ImgList[2]"
                  usage-name="ImgList2"
                  @handleSucces="handleSucces"
                  @handleError="handleError"
                />
                <p class="picture_content">其他（选填）</p>
              </div>
              <div>
                <upload
                  :image-url="ImgList[3]"
                  usage-name="ImgList3"
                  @handleSucces="handleSucces"
                  @handleError="handleError"
                />
                <p class="picture_content">其他（选填）</p>
              </div>
            </div>
            <div class="close_order_tab_from">
              <div>
                <i>*</i>卸货重量<el-input v-model="weight" size="mini" placeholder="请输入内容" />吨
              </div>
              <div>
                数量<el-input v-model="amount" size="mini" placeholder="请输入内容" />
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="签收" name="third">
          <div class="close_order_tab">
            <div style="padding:10px 0;">
              <span>提货信息</span>
              <span style="margin-left:40px;">{{ new Date() }}</span>
            </div>
            <div class="close_order_tab_picture">
              <div>
                <img
                  class="picImg"
                  :src="repairUrl(loadImg[0])"
                  mode="scaleToFill"
                >
                <p class="picture_content">装货签收单（必填）</p>
              </div>
              <div>
                <img
                  class="picImg"
                  :src="repairUrl(loadImg[1])"
                  mode="scaleToFill"
                >
                <p class="picture_content">封车照片（选填）</p>
              </div>
              <div>
                <img
                  class="picImg"
                  :src="repairUrl(loadImg[2])"
                  mode="scaleToFill"
                >
                <p class="picture_content">其他（选填）</p>
              </div>
              <div>
                <img
                  class="picImg"
                  :src="repairUrl(loadImg[3])"
                  mode="scaleToFill"
                >
                <p class="picture_content">其他（选填）</p>
              </div>
            </div>
            <div class="close_order_tab_from">
              <div>
                <i>*</i>装货重量<el-input v-model="detail.loadingWeight" size="mini" placeholder="请输入内容" />吨
              </div>
              <div>
                数量<el-input v-model="detail.loadingAmount" size="mini" placeholder="请输入内容" />
              </div>
            </div>
          </div>
          <div class="close_order_tab">
            <div style="padding:10px 0;">
              <span>送达信息</span>
              <span style="margin-left:40px;">{{ new Date() }}</span>
            </div>
            <div class="close_order_tab_picture">
              <div>
                <img
                  class="picImg"
                  :src="repairUrl(unloadImg[0])"
                  mode="scaleToFill"
                >
                <p class="picture_content">装货签收单（必填）</p>
              </div>
              <div>
                <img
                  class="picImg"
                  :src="repairUrl(unloadImg[1])"
                  mode="scaleToFill"
                >
                <p class="picture_content">封车照片（选填）</p>
              </div>
              <div>
                <img
                  class="picImg"
                  :src="repairUrl(unloadImg[2])"
                  mode="scaleToFill"
                >
                <p class="picture_content">其他（选填）</p>
              </div>
              <div>
                <img
                  class="picImg"
                  :src="repairUrl(unloadImg[3])"
                  mode="scaleToFill"
                >
                <p class="picture_content">其他（选填）</p>
              </div>
            </div>
            <div class="close_order_tab_from">
              <div>
                <i>*</i>卸货货重量<el-input v-model="detail.deliveryWeight" size="mini" placeholder="请输入内容" />吨
              </div>
              <div>
                数量<el-input v-model="detail.deliveryAmount" size="mini" placeholder="请输入内容" />
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="detail_btn">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button>取 消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import upload from '../../../components/Upload/index'
import { supplyUrl } from '@/api/common/file'
import { waybillLoading, waybillUnLoading, waybillComplete, getWaybillDetail } from '@/api/tms/waybill'
export default {
  name: 'CloseOrder',
  components: {
    upload
  },
  data() {
    return {
      activeName: 'first',
      input: '',
      status: '',
      oid: '',
      weight: '',
      amount: '',
      ImgList: [],
      unloadImg: [],
      loadImg: [],
      detail: {}
    }
  },
  created() {
    this.status = this.$route.query.status
    this.oid = this.$route.query.oid
    if (this.status === 'PENDING') {
      this.activeName = 'first'
    } else if (this.status === 'PROCESSING') {
      this.activeName = 'second'
    } else if (this.status === 'COMPLETE') {
      this.activeName = 'third'
      this.getDetail()
    }
  },

  methods: {
    getSecond() {
      return this.status === 'PROCESSING' || this.status === 'PENDING'
    },
    repairUrl(url) {
      return supplyUrl(url)
    },
    getDetail() {
      getWaybillDetail(this.oid).then(res => {
        this.loadImg = res.freightAttachments[0].attachmentUrl.split(',')
        this.unloadImg = res.freightAttachments[1].attachmentUrl.split(',')
        this.detail = res
      })
    },
    handleClick(e) {
      console.log(e)
    },
    handleSucces(res) {
      const mun = res.usageName.substr(res.usageName.length - 1, 1) * 1
      console.log(mun)
      this.ImgList[mun] = res.url
    },
    handleError(e) {
      console.log(e)
    },
    onSubmit() {
      console.log('submit!')
    },
    tableFiltrate(index) {
      this.tableBtnIndex = index
    },
    handleCurrentChange() {

    },
    handleSizeChange() { },

    pushDetail(id) {
      this.$router.push({ path: '/orderManage/orderDetail' })
    },
    // 根据title判断是调付款还是预付款......接口
    goToBack() {
      setTimeout(() => {
        this.$router.push({ path: '/dispatchManage/waybillList' })
      }, 2000)
    },

    getImgUrl(list) {
      return list.join(',')
    },
    submit() {
      console.log(33)
      const data = {}
      if (this.status === 'PENDING') {
        data.freightNo = this.oid
        data.weight = this.weight
        data.amount = this.amount
        data.attachmentUrl = this.getImgUrl(this.ImgList)
        console.log(data)
        waybillLoading(data).then(res => {
          if (res) {
            this.$notify({
              title: '成功',
              message: '提货成功',
              type: 'success',
              duration: 2000
            })
            this.goToBack()
          }
        })
      } else if (this.status === 'PROCESSING') {
        data.freightNo = this.oid
        data.weight = this.weight
        data.amount = this.amount
        data.attachmentUrl = this.getImgUrl(this.ImgList)
        waybillUnLoading(data).then(res => {
          console.log(res)
          if (res) {
            this.$notify({
              title: '成功',
              message: '卸货成功',
              type: 'success',
              duration: 2000
            })
            this.goToBack()
          }
        })
      } else if (this.status === 'COMPLETE') {
        waybillComplete(this.oid).then(res => {
          console.log(res)
          if (res) {
            this.$notify({
              title: '成功',
              message: '签收成功',
              type: 'success',
              duration: 2000
            })
            this.goToBack()
          }
        })
      }
    }
  }
}
</script>
<style lang="scss">
.close_order{
  .close_order_tab{
    width: 50%;
    .close_order_tab_picture{
      display: flex;
      justify-content: space-between;
      .picture_content{
        text-align: center;
        font-size: 14px;
      }
      .picImg{
        width: 148px;
        height: 148px;
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
      }
    }
    .close_order_tab_from{
      div{
        margin: 10px;
        i{
          color: red;
        }
        .el-input{
          width: 150px;
        }
      }
    }
  }
}
</style>
